import Component from "@glimmer/component";
import { action } from "@ember/object";
import discourseComputed from "discourse-common/utils/decorators";

export default class OkBanner extends Component {

  constructor() {
    super(...arguments);
    window.onload = () => {

      const cus_banner_container = document.getElementById('cus_banner_container');
      //增加鼠标移入移出事件
      cus_banner_container.onmouseover = function () {
        document.getElementById('cus_banner_arrow').style.display = 'block';
      }
      cus_banner_container.onmouseout = function () {
        document.getElementById('cus_banner_arrow').style.display = 'none';
      }
    }

  }

  @action
  handleClick(dir) {
    const length = this.bannerList.length;
    // 获取cus_banner_client下，判断含有cus_banner_image_active的元素的第几个
    var index;
    var active = document.getElementsByClassName('cus_banner_image_active')[0];
    for (var i = 0; i < length; i++) {
      if (document.getElementsByClassName('cus_banner_image')[i] === active) {
        index = i;
        break;
      }
    }
    if (dir === 'left') {
      index = index - 1 < 0 ? length - 1 : index - 1;
    } else {
      index = index + 1 > length - 1 ? 0 : index + 1;
    }

    //给当前index对应的元素添加过渡动画
    active.style.transition = 'opacity 0.8s';
    active.style.opacity = 0;
    const bannerImage = document.getElementsByClassName('cus_banner_image')[index];
    bannerImage.style.transition = 'opacity 0.8s';
    bannerImage.style.opacity = 1;
    //给当前index对应的元素添加cus_banner_image_active类名
    active.classList.remove('cus_banner_image_active');
    bannerImage.classList.add('cus_banner_image_active');

  }

  get bannerList() {
    // 获取settings中的所有banner信息
    let bannerList = []
    for(let i = 1; i <= 5; i++) {
      const imageUrl = settings["banner_" + i];
      const linkUrl = settings["banner_" + i + "_url"];
      if (imageUrl && linkUrl) {
        bannerList.push({
          imageUrl: imageUrl,
          linkUrl: linkUrl,
          isFirst: i === 1
        })

      }
    }
    return bannerList;
  }

}